<div class="modal-content" data-test-modal="upload-image">
    <div class="modal-body">
        {{#if this.url}}
            <div class="gh-image-uploader -with-image">
                <div><img src={{this.url}} alt="" role="presentation"></div>
                <button type="button" class="image-delete" title="Delete" {{on "click" this.removeImage}}>
                    {{svg-jar "trash"}}
                    <span class="hidden">Delete</span>
                </button>
            </div>
        {{else}}
            <GhImageUploader
                @image={{this.url}}
                @saveButton={{false}}
                @update={{this.fileUploaded}}
                @uploadStarted={{fn (mut this.isUploading) true}}
                @uploadFinished={{fn (mut this.isUploading) false}}
                @accept={{@data.accept}}
                @extensions={{@data.extensions}}
                @uploadUrl={{@data.uploadUrl}}
                @paramsHash={{@data.paramsHas}}
            />
        {{/if}}
    </div>

    <div class="modal-footer">
        <button class="gh-btn" type="button" {{on "click" @close}}><span>Cancel</span></button>
        {{#if this.isUploading}}
            <button class="gh-btn gh-btn-black right gh-btn-icon disabled" type="button"><span>Save</span></button>
        {{else}}
            <GhTaskButton
                @task={{this.uploadImageTask}}
                @class="gh-btn gh-btn-black right gh-btn-icon"
                data-test-modal-accept-button
            />
        {{/if}}
    </div>
</div>